<template>
  <div class="page">
    <div class="section_left">
      <!-- 近期系统活跃量 -->
      <div class="jqxthyl_box">
        <div class="title">近期系统活跃用户</div>
        <div class="chart_box">
          <Chart ref="jqxthyl_ref"></Chart>
        </div>
      </div>
      <!-- 小区通知浏览量排行榜 柱状图 -->
      <div class="xqtzlllphb_box">
        <div class="title">小区通知浏览量排行榜</div>
        <div class="chart_box">
          <Chart ref="xqtzlllphb_ref"></Chart>
        </div>
      </div>
    </div>
    <div class="section_center">
      <!-- 上报问题处理情况 柱状图 -->
      <div class="sbwtclqk_box">
        <div class="title">上报问题处理情况</div>
        <div class="chart_box">
          <Chart ref="sbwtclqk_ref"></Chart>
        </div>
      </div>
    </div>
    <div class="section_right">
      <!-- 上报问题类型占比 饼图 -->
      <div class="sbwtlxzb_box">
        <div class="title">上报问题类型占比</div>
        <div class="chart_box">
          <Chart ref="sbwtlxzb_ref"></Chart>
        </div>
      </div>
      <!-- 上报问题热度排行 柱状图 -->
      <div class="sbwtrdph_box">
        <div class="title">上报问题热度排行榜</div>
        <div class="chart_box">
          <Chart ref="sbwtrdph_ref"></Chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/chart/index.vue"

export default {

  data() {
    return {
      
    }
  },
  methods: {
    dataInit(){
      this.$API.chart.getAllData().then(res=>{
        // console.log(res);
        let {jqxthyl,sbwtclqk,sbwtlxzb,sbwtrdph,xqtzlllphb} = res.data

        this.sbwtlxzbChartInit(sbwtlxzb)

        this.sbwtrdphChartInit(sbwtrdph)

        this.sbwtclqkChartInit(sbwtclqk)

        this.xqtzlllphbChartInit(xqtzlllphb)

        this.jqxthylChartInit(jqxthyl)
      }).catch(err=>{
        console.log(err);
      })
    },
    // 上报问题类型占比 饼图
    sbwtlxzbChartInit(data){
      let options = {
        tooltip: {
          trigger: "item",
        },
        color: ["#5470c6", "rgb(145, 204, 117)","rgb(250, 200, 88)","rgb(238, 102, 102)","rgb(115, 192, 222)"],
        legend:{
          show:true,
          icon:'circle',
        },
        series: [
          {
            name:'问题类型',
            type: "pie",
            radius: ["30%", "60%"],
            center:['50%','60%'],
            avoidLabelOverlap: false,
            startAngle:60,
            itemStyle: {
              borderRadius: 10,
              borderColor: "rgba(14, 95, 255, 0.2)",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "outside",
              formatter:'{name|{b}}\n{value|{d}%}',
              fontSize:14,
              fontFamily:'Impact',
              color:"#fff",
              rich:{
                name:{
                  fontFamily:'PingFang SC',
                  fontWeight:500,
                  fontSize:14,
                  color:'#303133',
                  lineHeight:20,
                },
                value:{
                  fontFamily:'Impact',
                  fontWeight:400,
                  fontSize:14,
                  color:'303133',
                  lineHeight:20,
                },
              }
            },
            labelLine: {
              show: true,
              showAbove:true,
              length2:20,
              lineStyle:{
                color:"#4BA5FF",
                width:2
              }
            },
            data,
          },
        ],
      }

      this.$refs.sbwtlxzb_ref.echartsInit(options)
    },
    // 上报问题热度排行 柱状图
    sbwtrdphChartInit(data){
      let categoryList = []
      let valueList = []

      data.forEach(item=>{
        categoryList.push(item.name)
        valueList.push(item)
      })

      let options = {
        grid:{
          left:'10%',
          bottom:'10%',
        },
        xAxis: {
          type: "category",
          data: categoryList,
          axisLabel: {
            interval: 0,
            color: "##606266",
            fontSize: 16,
            fontWeight:400,
            fontFamily: "Source Han Sans CN",
            formatter:function(value,index){
              return value.slice(0,3)
            },
          },
          axisLine: {
            lineStyle: {
              color: "#5BE9FF",
              opacity: 0.5,
            },
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "热度值",
          nameTextStyle: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          type: "value",
          axisLabel: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          axisLine: {
            lineStyle: {
              color: "#606266",
              opacity: 0.5,
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color:"#013D80",
            },
          },
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#83bff6", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#188df0", // 100% 处的颜色
              },
            ],
          },
        ],
        tooltip: {
          show: true,
          trigger: "axis",
        },
        series: [
          {
            name:"热度值",
            type: "bar",
            data: valueList,
            barWidth: "30%",
            label:{
              show:true,
              formatter:'{value|{c}}',
              distance:3,
              position:'top',
              rich:{
                value:{
                  fontSize:12,
                  fontFamily:'Source Han Sans CN',
                  fontWeight:400,
                  color:'#909399'
                }
              }
            },
            
          },
        ],
      }

      this.$refs.sbwtrdph_ref.echartsInit(options)
    },
    // 上报问题处理情况 柱状图
    sbwtclqkChartInit(data){
      let categoryList = []
      let valueList = []

      data.forEach(item=>{
        categoryList.push(item.name)
        valueList.push(item)
      })

      let options = {
        grid:{
          left:'10%',
          bottom:'10%',
        },
        xAxis: {
          type: "category",
          data: categoryList,
          axisLabel: {
            interval: 0,
            color: "#606266",
            fontSize: 16,
            fontWeight:400,
            fontFamily: "Source Han Sans CN",
          },
          axisLine: {
            lineStyle: {
              color: "#5BE9FF",
              opacity: 0.5,
            },
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "件数",
          nameTextStyle: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          type: "value",
          axisLabel: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#606266",
              opacity: 0.5,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color:"#013D80",
            },
          },
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#83bff6", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#188df0", // 100% 处的颜色
              },
            ],
          },
        ],
        tooltip: {
          show: true,
          trigger: "axis",
        },
        series: [
          {
            name:"处理件数",
            type: "bar",
            data: valueList,
            barWidth: "30%",
            label:{
              show:true,
              formatter:'{value|{c}}',
              distance:3,
              position:'top',
              rich:{
                value:{
                  fontSize:12,
                  fontFamily:'Source Han Sans CN',
                  fontWeight:400,
                  color:'#fff'
                }
              }
            },
            
          },
        ],
      }

      this.$refs.sbwtclqk_ref.echartsInit(options)
    },
    // 小区通知浏览量排行榜 柱状图
    xqtzlllphbChartInit(data){
      let categoryList = []
      let valueList = []

      data.forEach(item=>{
        categoryList.push(item.name)
        valueList.push(item)
      })

      let options = {
        grid:{
          left:'10%',
          bottom:'10%'
        },
        xAxis: {
          type: "category",
          data: categoryList,
          axisLabel: {
            color: "#606266",
            fontSize: 16,
            fontWeight:400,
            fontFamily: "Source Han Sans CN",
            formatter:function(value,index){
              return value.slice(0,3)
            },
          },
          axisLine: {
            lineStyle: {
              color: "#606266",
              opacity: 0.5,
            },
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "浏览量",
          nameTextStyle: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          type: "value",
          axisLabel: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          axisLine: {
            lineStyle: {
              color: "#606266",
              opacity: 0.5,
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color:"#013D80",
            },
          },
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#83bff6", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#188df0", // 100% 处的颜色
              },
            ],
          },
        ],
        tooltip: {
          show: true,
          trigger: "axis",
        },
        series: [
          {
            name:'浏览量',
            type: "bar",
            data: valueList,
            barWidth: "30%",
            label:{
              show:true,
              formatter:'{value|{c}}',
              distance:3,
              position:'top',
              rich:{
                value:{
                  fontSize:12,
                  fontFamily:'Source Han Sans CN',
                  fontWeight:400,
                  color:'#909399'
                }
              }
            },
            
          },
        ],
      }

      this.$refs.xqtzlllphb_ref.echartsInit(options)
    },
    // 近期系统活跃量 折线图
    jqxthylChartInit(data){
      let categoryList = []
      let valueList = []
      data = data.map(item=>{
        return {
          name:item.time,
          value:item.visits,
        }
      })
      
      data.forEach(item=>{
        categoryList.push(item.name.slice(5))
        valueList.push(item)
      })

      let options = {
        grid:{
          left:'10%',
          bottom:'10%',
        },
        xAxis: {
          type: "category",
          data: categoryList,
          axisLabel: {
            color: "#606266",
            fontSize: 16,
            fontWeight:400,
            fontFamily: "Source Han Sans CN",
          },
          axisLine: {
            lineStyle: {
              color: "#606266",
              opacity: 0.5,
            },
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "活跃量",
          nameTextStyle: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          type: "value",
          axisLabel: {
            color: "#606266",
            fontSize: 14,
            fontFamily: "Helvetica",
            fontWeight: 400,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#606266",
              opacity: 0.5,
            },
          },
          axisTick: {
            show: false,
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        series: [
          { 
            name:"活跃用户数",
            type: "line",
            data: valueList,
            label:{
              show:true,
              formatter:'{value|{c}}',
              distance:3,
              position:'top',
              rich:{
                value:{
                  fontSize:12,
                  fontFamily:'Source Han Sans CN',
                  fontWeight:400,
                  color:'#909399'
                }
              }
            },
            
          },
        ],
      }

      this.$refs.jqxthyl_ref.echartsInit(options)
    },
  },
  components:{Chart},
  created(){
    this.dataInit()
  }
}
</script>

<style lang='less' scoped>
  .flex_cloumn{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .page{
    width: 100%;
    height: 100%;
    display: flex;
    gap:16px;
    .title{
      color: #606266;
      font-weight: 700;
      font-size: 18px;
      margin-bottom: 8px;
      &::before{
        content: '■';
        color: #409EFF;
        font-size: 24px;
        margin-right:8px;
      }
    }
    .chart_box{
      width: 100%;
      height: 90%;
      border: 2px solid rgb(243, 244, 250);
      border-radius: 10px;
    }
    .section_left{
      box-sizing: border-box;
      padding-bottom: 15px;
      flex: 1;
      .flex_cloumn();
      .jqxthyl_box{
        flex: 1;
      }
      .xqtzlllphb_box{
        flex: 1;
      }
    }
    .section_center{
      flex: 1.5;
      height: 60vh;
      .sbwtclqk_box{
        height: 90%;
      }
    }
    .section_right{
      box-sizing: border-box;
      padding-bottom: 15px;
      flex: 1;
      .flex_cloumn();
      .sbwtlxzb_box{
        flex: 1;
      }
      .sbwtrdph_box{
        flex: 1;
      }
    }
  }
</style>